<w-step-by-step active-step="$ctrl.step">
    <w-step>
        <div class="asset-modal">
            <w-asset-info-head ng-cloak asset-id="$ctrl.asset.id"></w-asset-info-head>
        </div>

        <form novalidate name="sponsored">

            <div class="sponsorship__content margin-top-4">
                <div class="sponsorship__line">
                    <div class="basic-500" w-i18n="modal.sponsorship.assetId"></div>
                    <div class="basic-900 fs-mobile ng-binding">{{::$ctrl.asset.id}}</div>
                </div>

                <div class="basic-500 margin-top-1" w-i18n="modal.token.description"></div>
                <div class="sponsorship__line description margin-3">
                    <div class="basic-900 fs-mobile ng-binding">{{::$ctrl.description}}</div>
                </div>

                <div class="plate-warning margin-3 body-1">
                    <div class="margin-05 body-2 warning-500"
                         w-i18n="modal.sponsorship.warningHeader"
                         params="{name: $ctrl.asset.name}"></div>
                    <div class="footnote-1 basic-500" w-i18n="modal.sponsorship.warningText"
                         params="{name: $ctrl.asset.name}"></div>
                </div>

                <div class="margin-05 body-2 basic-900" w-i18n="modal.sponsorship.amountPerTx"></div>

                <w-input-container class="margin-1">
                    <w-input ng-model="$ctrl.minSponsoredAssetFee"
                             name="minSponsoredAssetFee"
                             w-validate
                             type="text"
                             required
                             w-validator-gt="0"
                             w-validator-custom="{{$ctrl.canSendTransaction}}"
                             w-validator-asset="{{::$ctrl.asset.id}}"
                             class="big"></w-input>

                    <div title="{{$ctrl.asset.name}}"
                         class="currency basic-500 caption-2">{{$ctrl.asset.displayName}}
                    </div>

                    <w-input-error message="required">
                        <span w-i18n="modal.sponsorship.errors.feeRequired"></span>
                    </w-input-error>
                    <w-input-error message="gt">
                        <span w-i18n="modal.sponsorship.errors.notZero"></span>
                    </w-input-error>
                    <w-input-error message="precision">
                        <span w-i18n="modal.sponsorship.errors.minSponsoredAssetFee.precision"></span>
                    </w-input-error>
                </w-input-container>

                <div class="basic-500 margin-top-1"
                     w-i18n="modal.sponsorship.fee"
                     params="{fee: $ctrl.fee}"></div>

                <div class="row commission-error margin-top-1 footnote error-500"
                     ng-if="!$ctrl.canSendTransaction">
                            <span params="{fee: $ctrl.fee, currency: $ctrl.fee.asset}"
                                  w-i18n="modal.sponsorship.errors.noMoney">
                            </span>
                </div>

                <div class="margin-top-3">
                    <w-sign-button class="big submit long"
                                   disabled="sponsored.$invalid"
                                   on-click="$ctrl.getSignable()"
                                   on-success="$ctrl.onConfirm()">
                        <span w-i18n-ns="app.utils" w-i18n="modal.sponsorship.continue"></span>
                    </w-sign-button>
                </div>
            </div>

        </form>
    </w-step>
    <w-step>
        <w-confirm-transaction on-click-back="$ctrl.onBack()"
                               signable="$ctrl.signable"></w-confirm-transaction>
    </w-step>
</w-step-by-step>
